<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>随机菜单生成器</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding-bottom: 60px;
      /* 确保页面底部内容不被遮挡 */
    }

    h1 {
      text-align: center;
      margin-top: 20px;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
      min-height: 100vh;
      /* 设置最小高度以填充整个视口 */
    }

    #dish-input {
      width: 300px;
      padding: 5px;
      margin-bottom: 10px;
    }

    #dish-list {
      list-style-type: none;
      padding: 0;
      margin: 120px 0 10px 0;
      width: 100%;
    }

    #dish-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      position: relative;
      font-size: 24px;
      font-weight: bold;
    }

    .button-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #f8f9fa;
      padding: 20px;
      box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.1);
    }

    .button-container button {
      margin: 0 5px;
      font-size: 16px;
    }

    #random-dish {
      height: 48px;
      text-align: center;
      font-size: 18px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 480px;
      font-size: 20px;
    }

    .delete-button {
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px 10px;
      background-color: #dc3545;
      color: #fff;
      font-size: 14px;
      border: none;
      border-radius: 3px;
    }

    .delete-button:hover {
      background-color: #c82333;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      padding: 10px 30px;
      z-index: 999;
    }

    .btn-primary {
      height: 38px;
    }

    .bottom {
      height: 48px;
    }

    @media screen and (max-width: 375px),
    screen and (max-width: 414px) {
      #random-dish {
        font-size: 16px;
      }

      .button-container,
      #random-dish {
        padding: 10px 2px 0 0;
      }

      .bottom {
        width: 80px;
        height: 60px;
      }

      #dish-list {
        margin-top: 150px;
      }

      #dish-input {
        width: 200px;
      }
    }
  </style>
</head>

<body>
  <div class="header">
    <h1>随机菜单生成器</h1>
    <div class="input-group mb-3">
      <input type="text" id="dish-input" class="form-control" placeholder="请输入菜名">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" onclick="addDish()">添加菜品</button>
      </div>
    </div>
  </div>

  <div class="container">
    <ul id="dish-list" class="list-group"></ul>
  </div>

  <div class="button-container">
    <button class="btn btn-primary bottom" onclick="randomDish()">随机选择</button>
    <div id="random-dish"></div>
  </div>

  <script>
    let dishes = [
      {
        "name": "红烧肉"
      },
      {
        "name": "宫保鸡丁"
      },
      {
        "name": "麻婆豆腐"
      },
      {
        "name": "水煮鱼"
      },
      {
        "name": "酸辣土豆丝"
      },
      {
        "name": "糖醋排骨"
      },
      {
        "name": "回锅肉"
      },
      {
        "name": "香菇鸡肉煲"
      },
      {
        "name": "鱼香肉丝"
      },
      {
        "name": "宫保虾球"
      },
      {
        "name": "东坡肉"
      },
      {
        "name": "剁椒鱼头"
      },
      {
        "name": "番茄炒蛋"
      },
      {
        "name": "孜然羊肉"
      },
      {
        "name": "蚂蚁上树"
      },
      {
        "name": "麻辣香锅"
      },
      {
        "name": "口水鸡"
      },
      {
        "name": "干煸豆角"
      },
      {
        "name": "梅菜扣肉"
      },
      {
        "name": "锅包肉"
      },
      {
        "name": "麻辣烫"
      },
      {
        "name": "干锅牛蛙"
      },
      {
        "name": "蒜蓉蒸扇贝"
      },
      {
        "name": "葱爆羊肉"
      },
      {
        "name": "韭菜炒鸡蛋"
      },
      {
        "name": "豆腐脑"
      },
      {
        "name": "冰糖葫芦"
      },
      {
        "name": "炸酱面"
      },
      {
        "name": "三杯鸡"
      },
      {
        "name": "油焖大虾"
      },
      {
        "name": "红烧茄子"
      },
      {
        "name": "水煮肉片"
      },
      {
        "name": "苏式糖醋小黄鱼"
      },
      {
        "name": "烤鸭"
      },
      {
        "name": "夫妻肺片"
      },
      {
        "name": "叫花鸡"
      },
      {
        "name": "蚝油生菜心"
      },
      {
        "name": "清蒸鲈鱼"
      },
      {
        "name": "炸鸡块"
      },
      {
        "name": "蒜香排骨"
      },
      {
        "name": "香辣蟹"
      },
      {
        "name": "梅干菜烧肉"
      },
      {
        "name": "糖醋鲤鱼"
      },
      {
        "name": "麻辣鸡丝"
      },
      {
        "name": "椒盐虾"
      },
      {
        "name": "爆炒牛肉粒"
      },
      {
        "name": "蚝油牛柳"
      },
      {
        "name": "咖喱鸡"
      },
      {
        "name": "剁椒鱼头"
      }
    ]
    // 初始化菜单
    function initializeMenu() {
      let menu = localStorage.getItem('menu');
      let dishes = []; // 声明并初始化 dishes 数组
      if (!menu) {
        // 如果本地存储中没有菜单数据，使用 dishes 变量内的数据
        menu = JSON.stringify(dishes);
        localStorage.setItem('menu', menu);
      } else {
        // 如果本地存储中已有菜单数据，更新 dishes 变量的值
        dishes = JSON.parse(menu);
      }
      loadMenu();
    }

    // 加载菜单列表
    function loadMenu() {
      let dishList = document.getElementById('dish-list');
      dishList.innerHTML = '';
      for (let i = 0; i < dishes.length; i++) {
        let dish = dishes[i].name;
        let li = document.createElement('li');
        let span = document.createElement('span');
        span.innerText = dish;
        let button = document.createElement('button');
        button.innerText = '删除';
        button.classList.add('delete-button'); // 添加删除按钮样式类
        button.addEventListener('click', function () {
          deleteDish(this);
        });
        li.appendChild(span);
        li.appendChild(button);
        dishList.appendChild(li);
      }
    }

    // 添加菜品
    function addDish() {
      let dishInput = document.getElementById('dish-input');
      let dish = dishInput.value.trim();
      if (dish) {
        let menu = localStorage.getItem('menu');
        if (menu) {
          dishes = JSON.parse(menu); // 更新 dishes 变量的值
        }
        dishes.push({ name: dish });
        localStorage.setItem('menu', JSON.stringify(dishes));
        dishInput.value = '';
        loadMenu();
      }
    }

    // 删除菜品
    function deleteDish(button) {
      let dish = button.previousSibling.innerText;
      let menu = localStorage.getItem('menu');
      if (menu) {
        dishes = JSON.parse(menu); // 更新 dishes 变量的值
        let index = dishes.findIndex(item => item.name === dish);
        if (index !== -1) {
          dishes.splice(index, 1);
          localStorage.setItem('menu', JSON.stringify(dishes));
          loadMenu();
        }
      }
    }

    // 随机选择菜品
    function randomDish() {
      let menu = localStorage.getItem('menu');
      if (menu) {
        dishes = JSON.parse(menu); // 更新 dishes 变量的值
        let randomDishes = [];
        let menuCopy = dishes.slice(); // 创建菜单的副本
        while (randomDishes.length < 3 && menuCopy.length > 0) {
          let randomIndex = Math.floor(Math.random() * menuCopy.length);
          let randomDish = menuCopy[randomIndex].name;
          randomDishes.push(randomDish);
          menuCopy.splice(randomIndex, 1);
        }
        let randomDishElement = document.getElementById('random-dish');
        randomDishElement.innerHTML = '<strong>今天的菜单：</strong>' + randomDishes.join(',');
      }
    }
    // 页面加载时初始化菜单
    initializeMenu();
  </script>
</body>

</html>